<template>
  <div>
    <el-collapse>
      <el-collapse-item title="商品管理介绍" name="1">
        <div>商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>
      </el-collapse-item>
    </el-collapse>

    <el-collapse class="margin_30">
      <el-collapse-item title="条件查询" name="1">
        <el-form ref="form" :model="productInfo" :inline="true" size="mini" label-width="120px">
          <el-form-item :label="isactivity?'':'商品名称'">
            <el-input v-model="productInfo.name" placeholder="商品名称/模糊查询" />
          </el-form-item>
          <el-form-item :label="isactivity?'':'商品货号'">
            <el-input v-model="productInfo.productSn" placeholder="商品货号" />
          </el-form-item>
          <el-form-item :label="isactivity?'':'品牌'">
            <el-select v-model="productInfo.brandId" placeholder="请选择活动区域">
              <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="isactivity?'':'上架状态'">
            <el-select v-model="productInfo.publishStatus" placeholder="上架状态">
              <el-option label="上架" value="1" />
              <el-option label="下架" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item :label="isactivity?'':'审核状态'">
            <el-select v-model="productInfo.verifyStatus" placeholder="审核状态">
              <el-option label="审核通过" value="1" />
              <el-option label="未审核" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

      </el-collapse-item>
    </el-collapse>

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <p v-if="isactivity">商品列表</p>
        <span v-else>
          <el-button type="primary" size="mini" @click="goAddProduct">新增</el-button>
          <el-button type="primary" size="mini" @click="exportExcel">导出商品列表excel文件</el-button>
        </span>
      </div>
      <el-table
        :data="productList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          width="50"
          align="center"
        />
        <el-table-column
          v-if="isactivity"
          label="选择"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-radio v-model="isSelect" :label="scope.row.id" @change="selectDialog(scope.row)"><span>&nbsp;</span></el-radio>

          </template>
        </el-table-column>
        <el-table-column
          label="商品图片"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <img style="width:100px; height:100px" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          align="center"
          width="200"
        ><template slot-scope="scope">
          <p>{{ scope.row.name }}</p>
          <p>品牌:{{ scope.row.brandName }}</p>
          <p>{{ scope.row.description }}</p>
        </template>
        </el-table-column>
        <el-table-column
          label="商品价格"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <p>原价:{{ scope.row.originalPrice }}</p>
            <p>现价:{{ scope.row.price }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="productCategoryName"
          label="商品类别"
          align="center"
          width="200"
        />
        <el-table-column
          label="标签"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <p>最新:<el-switch
              v-model="scope.row.newStatus"
              active-color="#409eff"
            /></p>
            <p>推荐:<el-switch
              v-model="scope.row.recommendStatus"
              active-color="#409eff"
            /></p>
          </template>

        </el-table-column>

        <el-table-column
          label="标签2"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <p>最新:<el-switch
              v-model="scope.row.publishStatus"
              active-color="#409eff"
            /></p>
            <p>推荐:<el-switch
              v-model="scope.row.verifyStatus"
              active-color="#409eff"
            /></p>
          </template>

        </el-table-column>
        <el-table-column
          label="内容"
          align="center"
          width="200"
        >
          <el-button type="primary">SKU</el-button>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          align="center"
          width="200"
        />
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
          width="200"
        />
        <el-table-column
          v-if="!isactivity"
          prop=""
          label="操作"
          fixed="right"
          align="center"
          width="150"
        >
          <template v-slot="scope">
            <el-link icon="el-icon-view" type="primary" @click="goUpProduct(scope.row.id)">编辑</el-link>
            <el-link type="danger" @click="delProduct(scope.row.id)">删除</el-link>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="start"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </el-card>

  </div>
</template>

<script>
import { productsByPage, findAllBrand, del } from '@/api/commodityManage/cdList/index'
import myMixins from '@/mixins/index'
export default {
  name: 'VueAdminTemplateMasterIndex',
  mixins: [myMixins],
  props: ['isactivity'],
  data() {
    return {
      isSelect: false,
      productInfo: {
        'brandId': '',
        'id': '',
        'name': '',
        'productCategoryId': '',
        'productSn': '',
        'publishStatus': '',
        'verifyStatus': ''
      },
      productList: [],
      brandList: []
    }
  },

  created() {
    findAllBrand().then(res => {
      this.brandList = res.data.items
    })
    this.init()
  },

  mounted() {

  },

  methods: {
    selectDialog(val) {
      this.$emit('isDialogShow', true, val)
    },
    exportExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品名称', '商品价格']
        const filterVal = ['name', 'originalPrice']
        const list = this.productList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          // eslint-disable-next-line no-undef
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    delProduct(id) {
      del(id).then(res => {
        console.log(res)
        this.init()
      })
    },
    goAddProduct() {
      this.$router.push('/commodityManage/addProduct')
    },
    goUpProduct(id) {
      this.$router.push(`/commodityManage/addProduct?productId=${id}`)
    },
    onSubmit() {
      this.init()
    },
    init() {
      productsByPage(this.start, this.limit, this.productInfo).then(res => {
        console.log(res)
        res.data.rows.forEach(ele => {
          ele.newStatus = !!ele.newStatus
          ele.recommendStatus = !!ele.recommendStatus
          ele.publishStatus = !!ele.publishStatus
          ele.verifyStatus = !!ele.verifyStatus
        })
        this.productList = res.data.rows
        this.total = res.data.total
      })
    }

  }
}
</script>

<style scoped>

</style>
